<template>
    <div>
        <Header></Header>
        
        <!-- 互动面版（固定） -->
        <!-- <InteractionPanel></InteractionPanel> -->
        
        <!-- 帖子内容 -->
        <div class="flex justify-center gap-[2rem] relative">
            <PostContent></PostContent>
         
            <!-- 右侧固定内容 -->
            <div class="sticky top-[1rem] h-fit">
                <!-- 目录 -->
                <Directory></Directory>

                <!-- 相关帖子 -->
                <RelatedPosts class="mt-[1rem]"></RelatedPosts>
            </div>
        </div>

        <Footer mode="dark"></Footer>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Header from '@/components/Header/index.vue'
import InteractionPanel from './components/InteractionPanel.vue'
import PostContent from './components/PostContent.vue'
import Directory from './components/Directory.vue'
import RelatedPosts from './components/RelatedPosts.vue'
import Footer from '@/components/Footer/index.vue'

import { useRoute } from 'vue-router'

const route = useRoute()
const id = route.params.id as string
const keyword = ref('')
const onSearch = () => {
    // 这里可以 emit 或直接处理搜索逻辑
    console.log('搜索内容：', keyword.value)
}
console.log(id)
</script>
<style scoped lang="scss">

</style>